<template>
  <view class="change-phone">
    <mt-navbar title="修改账户名" border-color="#dadbde">
      <template #left>
        <text class="text-#727687 text-28rpx">取消</text>
      </template>
      <template #right>
        <text class="text-#1484EE text-28rpx" @click="handleSubmit">完成</text>
      </template>
    </mt-navbar>
    <view class="mt-32rpx">
      <uv-form ref="changeUserInfoFormRef" label-position="left" label-width="auto" :rules="rules" :model="changeUserInfo">
        <!-- <mt-title title="当前名称"></mt-title>
        <uv-form-item>
          <view class="w-100% py-24rpx px-24rpx text-30rpx" style="border-bottom: 1rpx solid #dadbde">{{ currentUserName }}</view>
        </uv-form-item> -->
        <!-- <mt-title title="新名称" class="mt-32rpx"></mt-title> -->

        <!-- <uv-form-item label="账户名：" prop="userInfo.providerName">
          <uv-input v-model="changeUserInfo.userInfo.providerName" placeholder="请输入名称" border="bottom" maxlength="11" clearable> </uv-input>
        </uv-form-item> -->

        <uv-form-item label="账户名：" prop="userInfo.providerName" required>
          <uv-input
            v-model="changeUserInfo.userInfo.providerName"
            maxlength="20"
            minlength="4"
            placeholder="请输入名称"
            border="none"
            clearable
          ></uv-input>
        </uv-form-item>
      </uv-form>
      <view class="px-32rpx mt-16rpx">
        <text class="text-#ADB0BD text-24rpx"> 账户名长度4-20位，仅支持汉字、字母、数字的组合 </text>
      </view>
    </view>

    <!-- <view class="px-24rpx"> <mt-button class="w-100% mt-56rpx" style="border-radius: 192rpx" @click="handleSubmit">确认修改</mt-button></view> -->
  </view>
</template>

<script name="ChangePhone" setup>
import { updateProviderInfo } from '@/api/index.js';
import { onLoad } from '@dcloudio/uni-app';
import { userCheck } from '@/utils/regular.js';
import userStore from '@/store/user';

const user = userStore();

const changeUserInfoFormRef = ref(null);

const currentUserName = ref('');

const changeUserInfo = ref({
  userInfo: {
    providerName: user.userInfo.providerName
  }
});

const rules = ref({
  'userInfo.providerName': [
    {
      type: 'string',
      required: true,
      message: '请输入账户名',
      trigger: ['blur', 'change']
    },
    {
      validator: (rule, value, callback) => {
        return userCheck(value);
      },
      message: '账户名长度4-20位，仅支持汉字、字母、数字的组合，请重新输入',
      trigger: ['blur']
    }
  ]
});

// 修改账号名称
const handleSubmit = () => {
  changeUserInfoFormRef.value.validate().then(async (valid) => {
    if (valid) {
      const params = {
        avatarUrl: user.userInfo.avatarUrl,
        providerName: changeUserInfo.value.userInfo.providerName ? changeUserInfo.value.userInfo.providerName : null,
        registerZone: user.userInfo.registerZone
      };
      await updateProviderInfo(params);
      uni.showToast({
        title: '修改成功',
        icon: 'none'
      });

      user.setUserInfo({
        ...user.userInfo,
        providerName: changeUserInfo.value.userInfo.providerName
      });
      uni.navigateBack();
    }
  });
};

onLoad((data) => {
  currentUserName.value = data?.providerName;
});
</script>

<style lang="scss" scoped>
.change-phone {
  background-color: #f7f7f7;
  min-height: 100vh;
}
:deep(.uv-form) {
  background-color: #ffffff;
  .no-border {
    .uv-form-item {
      border-bottom: none;
    }
  }
  .uv-form-item {
    font-size: 28rpx;
    margin: 0 32rpx;
    border-bottom: 2rpx solid #e4e4e4;
    .uv-form-item__body {
      padding: 30rpx 0;
    }
    .uv-form-item__body__left__content__label {
      font-size: 28rpx;
      color: #727687;
      padding-left: 8rpx;
    }
  }
}
</style>
